<template>
  <div class="app-container">
    <basic-container>
      <el-form :inline="true" :model="searchForm" ref="searchForm">
        <el-form-item>
          <el-input v-model.trim="searchForm.equipName" placeholder="请输入设备名称" clearable class="st-input-w"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search()">搜 索</el-button>
          <el-button type="default" @click="resetSearch('searchForm')">重 置</el-button>
        </el-form-item>
      </el-form>
      <el-button
          class="add-btn"
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="add"
          style="margin-bottom: 15px"
      >
        新增
      </el-button>
      <el-button
          class="add-btn"
          size="mini"
          type="danger"
          icon="el-icon-delete"
          @click="removeBtn"
          :disabled='chooseCheckBox'
          style="margin-bottom: 15px"
      >
        批量删除
      </el-button>
      <vxe-table
          border
          resizable
          highlight-hover-row
          show-overflow
          ref="xTable1"
          :data="tableData"
          @checkbox-all="selectAllEvent"
          @checkbox-change="selectChangeEvent">
        <vxe-table-column type="checkbox" width="60"></vxe-table-column>
        <vxe-table-column field="equipName" title="设备名称"></vxe-table-column>
<!--        <vxe-table-column field="status" title="状态">-->
<!--          <template v-slot:default="{ row }">-->
<!--            <div v-if="row.status === 1" style="color: #42b983">可用</div>-->
<!--            <div v-else style="color: red">不可用</div>-->
<!--          </template>-->
<!--        </vxe-table-column>-->
        <vxe-table-column field="remark" title="备注" min-width="300"></vxe-table-column>
        <vxe-table-column field="id" title="操作" width="150" fixed="right" align="center">
          <template v-slot:default="{ row }">
            <div style="display: inline-block">
              <el-button size="mini" @click="edit(row)" type="primary" icon="el-icon-edit" title="编辑"/>
              <el-button  type="danger" @click="del(row)" icon="el-icon-delete" size="mini" title="删除"/>
            </div>
          </template>
        </vxe-table-column>
      </vxe-table>
      <vxe-pager
          :loading="loading"
          :current-page="tablePage.page"
          :page-size="tablePage.size"
          :total="tablePage.totalElements"
          background
          @page-change="handlePageChange"
      >
      </vxe-pager>
      <!--新增弹出窗 start-->
      <el-dialog :title="title" width="550px" :close-on-click-modal="false" :visible.sync="dialogFormVisible" :before-close="close">
        <el-form :model="model" :rules="rules" ref="ruleForm" label-width="120px">
          <el-form-item label="设备名称" prop="equipName">
            <el-input v-model="model.equipName" placeholder="请输入设备名称" style="width: 350px"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" :rows="4" v-model="model.remark" placeholder="请输入备注信息" style="width: 350px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm('ruleForm')">取消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!--新增弹出窗 end-->

    </basic-container>
  </div>
</template>

<script>
import api from "@/api/classroom/classroom";
import {mapGetters} from 'vuex';

export default {
  name: "room-equipment",
  data(){
    return{
      loading: false,
      dialogFormVisible: false,
      title: '设备新增',
      tableData: [],
      searchForm: {  //搜索表单
        equipName: '',
      },
      removeIds: [],
      tablePage: {
        total: 0,
        page: 1,
        size: 10,
        background: true,
        totalElements: 0
      },
      model: {
        equipName: '',
        remark: ''
      },
      rules: {
        equipName: [
          { required: true, message: '请输入设备名称', trigger: 'blur' },
        ]
      }
    }
  },
  created() {
    this.getCompList();
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ]),
    chooseCheckBox() {
      return this.removeIds.length ? false : true;
    },
  },
  methods:{
    getCompList() {
      const params = {
        equipName: this.searchForm.equipName,
        page: this.tablePage.page,
        size: this.tablePage.size,
      }
      api.queryEquipmente(params, 'get').then((res) => {
        this.tableData = res.content;
        this.tablePage.totalElements = res.totalElements;
      })
    },
    // 搜索
    search() {
      this.tablePage.page = 1
      this.getCompList();
    },
    resetSearch() {
      this.searchForm = {};
      this.getCompList();
    },
    selectAllEvent ({ checked, records }) {
      this.removeIds = records.map((item)=>{ return item.equipId });
    },
    // eslint-disable-next-line no-unused-vars
    selectChangeEvent ({ checked, records }) {
      this.removeIds = records.map((item)=>{ return item.equipId });
    },
    // 分页发生改变事件 totalElements
    handlePageChange({currentPage, pageSize}) {
      this.tablePage.page = currentPage;
      this.tablePage.size = pageSize;
      this.getCompList();
    },
    //关闭弹窗，重置表单
    close(){
      this.dialogFormVisible = false;
      this.$refs['ruleForm'].resetFields();
    },
    resetForm(formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
    },
    // 新增
    add() {
      this.dialogFormVisible = true;
      this.title = '设备新增';
      this.model = {};
    },
    edit(val) {
      this.dialogFormVisible = true;
      this.title = '设备编辑';
      this.model = _.cloneDeep(val);
    },
    // 保存新增
    submitForm(formName) {
      let message = this.title === '设备编辑' ? '保存成功' : '新增成功';
      let type = this.title === '设备编辑' ? 'put' : 'post';
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const parmas = _.cloneDeep(this.model);
          api.queryEquipmente(parmas, type).then(() => {
            this.$message({
              message,
              type: 'success'
            });
            this.dialogFormVisible = false;
            this.getCompList();
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    del(val) {
      let ids = [];
      ids.push(val.equipId);
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.queryEquipmente(ids, 'delete').then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getCompList();
        });
      }).catch(() => {
        console.log('已取消')
      });
    },
    // 批量删除
    removeBtn() {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.queryEquipmente(this.removeIds, 'delete').then(() => {
          this.$message({
            type: 'success',
            message: '删除成功。'
          });
          this.getCompList();
        })
      }).catch(() => {
        console.log('已取消')
      });
    },
  }
}
</script>

<style scoped>

</style>